<!DOCTYPE html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title th:text="${title} ?: 'AI面试系统'">AI面试系统</title>

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- Bootstrap Icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />

    <!-- 自定义样式 -->
    <link th:href="@{/css/custom.css}" rel="stylesheet" />

    <!-- 页面特定样式 -->
    <th:block th:fragment="styles"></th:block>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark" th:fragment="navbar">
      <div class="container">
        <a class="navbar-brand d-flex align-items-center" th:href="@{/}">
          <i class="bi bi-robot me-2" style="font-size: 1.5rem"></i>
          AI面试系统
        </a>
        <button
          class="navbar-toggler border-0"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <span class="nav-link d-flex align-items-center">
                <i class="bi bi-person-circle me-2"></i>
                欢迎，<span sec:authentication="name">游客</span>
              </span>
            </li>
            <li class="nav-item">
              <a
                class="nav-link d-flex align-items-center"
                th:href="@{/interviews}"
              >
                <i class="bi bi-list-ul me-2"></i>我的面试
              </a>
            </li>
            <li class="nav-item" sec:authorize="hasRole('ADMIN')">
              <a
                class="nav-link d-flex align-items-center"
                th:href="@{/admin/users}"
              >
                <i class="bi bi-people me-2"></i>用户管理
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link d-flex align-items-center"
                th:href="@{/logout}"
              >
                <i class="bi bi-box-arrow-right me-2"></i>退出登录
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main th:fragment="content">
      <!-- 页面内容将在这里插入 -->
    </main>

    <!-- 页脚 -->
    <footer class="bg-light text-center py-4 mt-5" th:fragment="footer">
      <div class="container">
        <p class="text-muted mb-0">
          &copy; 2024 AI面试系统. 智能面试，精准评估.
        </p>
      </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="scripts"></th:block>
  </body>
</html>
